<template>
	<div class="sector_chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import eleResize from 'element-resize-detector';
export default {
	props: {
		data: { type: Array, default: () => [] }
	},
	data() {
		return {
			swchart: null,
			option: {
				series: {
					type: 'pie',
					radius: '50%',
					data: [],
					label: {
						show: true,
						formatter: '{name|{b}}\n {count|{d}%}',
						rich: {
							name: { fontSize: 16, lineHeight: 24 },
							count: { fontSize: 18, fontWeight: 'bold' }
						}
					},
					labelLine: { length: 80 },
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			}
		};
	},
	watch: {
		data: {
			handler(arr) {
				let dataArr = arr
					.filter((n) => n.name !== '合计')
					.map((item) => {
						let obj = { name: item.name };
						obj['value'] = Number(item.expeNum);
						return obj;
					});
				this.option.series.data = [...dataArr];
				this.$nextTick(() => {
					this.swchart.setOption(this.option);
				});
			},
			immediate: true
		}
	},
	mounted() {
		this.initializeEcharts();
	},
	methods: {
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.chart);
			eleResize().listenTo(this.$refs.chart, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sector_chart {
	flex: 1;
	overflow: hidden;
}
</style>
